<template>
	<view class="container">
		<view class="" style="height: 10rpx;background-color: #FAFAFA;">

		</view>
		<view class="content">
			<view class="list">
				<view class="item">
					<view class="title">
						用户姓名
					</view>
					<input class="uni-input" v-model="form.name" name="input" placeholder="请输入收货人姓名" />
				</view>
				<view class="item">
					<view class="title">
						电话号码
					</view>
					<input class="uni-input" type="number" v-model="form.mobile" name="input" placeholder="请输入收货人电话" />
				</view>
				<view class="item">
					<view class="title">
						省市区
					</view>
					<lcw-select-address class="uni-input" ref="lcwAddressRef" :address="address"
						@change="change"></lcw-select-address>
					<!-- <uni-icons type="map" size="16" color="#333" @click="handelshowMap" style="margin-left: 10rpx;"></uni-icons> -->
					<u-icon name="map" style="margin-left: 10rpx;" @click="handelshowMap" ></u-icon>
				</view>
				<view class="item">
					<view class="title">
						详细地址
					</view>
					<input class="uni-input" v-model="form.detailed" name="input" placeholder="请输入详细地址" />
				</view>
				<view class="item">
					<view class="title">
						设为默认
					</view>
					<switch color="#F63B29" name="switch" :checked="form.is_default" @change="switchchange"
						style="transform:scale(0.7)" />
				</view>
			</view>
		</view>
		<!-- <view class="bottomButtons"></view>
		<view class="bottomButton">
			<view class="btn" @click="submit">{{state?'添加地址':'修改地址'}}</view>
		</view> -->

		<view class="is-but" @click="submit">{{state?'添加地址':'修改地址'}}</view>

	</view>
</template>
<script setup>
	import {
		ref,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	const {
		proxy
	} = getCurrentInstance();
	let form = ref({
		name: '',
		mobile: '',
		province: '',
		city: '',
		area: '',
		street: "",
		detailed: '',
		is_default: false,
		longitude: '',
		latitude: '',
	})
	let address = ref({
		province: '',
		city: '',
		area: '',
		street: "",
	})
	let addresstr = ref('')
	let state = ref(true)
	let lcwAddressRef = ref()
	const handelshowMap = () => {
		console.log(form.value);
		if (!address.value.province) {
			uni.showToast({
				title: '请先选择省市区',
				icon: 'none'
			})
			return
		}


		uni.chooseLocation({
			latitude: form.value.latitude,
			longitude: form.value.longitude,
			success: function(res) {
				console.log('chooseLocation', res);
				console.log('位置名称：' + res.name);
				console.log('详细地址：' + res.address);
				console.log('纬度：' + res.latitude);
				console.log('经度：' + res.longitude);
				form.value.longitude = res.longitude
				form.value.latitude = res.latitude
				form.value.detailed = res.name

			},
			fail() {
				form.value.longitude = ''
				form.value.latitude = ''
				form.value.detailed = ''
				addresstr.value = ''
				address.value = {
					province: '',
					city: '',
					area: '',
					street: "",
				}
				lcwAddressRef.value.reset()
			}

		})


	}
	const a = {
		key: '598c972b94bcc6e6c66536ae550a239f',
		seKey: '25ff9eafeb43b85534504ba9d6eeb9a8'
	}
	onLoad((option) => {

		if (option.data) {
			let data = JSON.parse(option.data)
			if (data.ID) {
				uni.setNavigationBarTitle({
					title: '修改地址'
				})

				state.value = false
				form.value.ID = data.ID
				form.value.name = data.name
				form.value.mobile = data.mobile
				form.value.province = data.province
				form.value.city = data.city
				form.value.area = data.area
				form.value.longitude = data.longitude
				form.value.latitude = data.latitude
				address.value.province = data.province
				address.value.city = data.city
				address.value.area = data.area
				address.value.street = data.street
				address.value.longitude = data.longitude
				address.value.latitude = data.latitude

				form.value.detailed = data.detailed
				form.value.is_default = data.is_default == 1 ? true : false
				addresstr.value = data.province + data.city + data.area + data.street
				console.log(form.value, "--------------")
			}
		} else {
			uni.getLocation({
				type: 'wgs84',
				geocode: true,
				success: function(res) {
					form.value.longitude = res.longitude
					form.value.latitude = res.latitude

				}
			})
		}

	})
	onShow(() => {
		console.log('页面onShow')

	})
	const switchchange = (e) => {
		form.value.is_default = e.detail.value
		console.log('switchchange', e.detail.value)
	}
	const change = (value) => {
		addresstr.value = value.province + value.city + value.area
		address.value = value;
		console.log(address.value, "1")
		form.value.province = address.value.province
		form.value.city = address.value.city
		form.value.area = address.value.area
		form.value.street = address.value.street
		form.value.is_default = form.value.is_default ? 1 : 0
		uni.request({ //地址换经纬度

			url: `https://restapi.amap.com/v3/geocode/geo?address=${form.value.province+form.value.city+form.value.area+form.value.street}&key=3e2ed72107f91ba0e8a4f25e297eba78`,
			method: "GET",
			success(res) {
				if (res.data.status == 1) {
					const addressarr = res.data.geocodes[0].location.split(",");
					form.value.latitude = Number(addressarr[1])
					form.value.longitude = Number(addressarr[0])
					handelshowMap()

				} else {
					uni.showToast({
						icon: "none",
						title: '请填写地址信息'
					})
				}
			},
		});
	}
	const setSelectAddress = () => {
		lcwAddressRef.value.open();
	}
	const pageBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}
	const submit = () => {

		form.value.province = address.value.province
		form.value.city = address.value.city
		form.value.area = address.value.area
		form.value.street = address.value.street
		form.value.is_default = form.value.is_default ? 1 : 0
		if (!form.value.name) {
			uni.showToast({
				icon: 'none',
				title: '请填写收货人姓名'
			})
			return
		}
		if (!form.value.mobile) {
			uni.showToast({
				icon: 'none',
				title: '请填写收货人电话'
			})
			return
		}
		if (!form.value.province) {
			uni.showToast({
				icon: 'none',
				title: '请选择省市区'
			})
			return
		}
		if (!form.value.city) {
			uni.showToast({
				icon: 'none',
				title: '请选择省市区'
			})
			return
		}
		if (!form.value.area) {
			uni.showToast({
				icon: 'none',
				title: '请选择省市区'
			})
			return
		}
		if (!form.value.detailed) {
			uni.showToast({
				icon: 'none',
				title: '请填写详细信息'
			})
			return
		}
		proxy.$request({
			url: `api/address/`,
			method: state.value ? 'post' : 'put',
			data: form.value,
			success(res) {
				uni.showToast({
					icon: 'none',
					title: res.errmsg
				})
				if (res.errno == 0) {
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}


			}
		})




	}
</script>


<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.container {
		.content {
			.list {

				margin: 0 30rpx;
				.item {
					display: flex;
					background-color: #fff;
					justify-content: space-between;
					align-items: center;
					height: 96rpx;
					border-bottom: 1rpx solid #ddd;
					.title {
						font-size: 28upx;
						width: 200rpx;

						color: #2D2D2D;
					}

					.uni-input {
						width: calc(100% - 150upx);
						font-size: 28upx;
						text-align: right;
					}
				}


			}
		}
	}
	.is-but{
		height: 80rpx;
		background: #F63B29;
		border-radius: 16rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 30rpx;
	}
</style>
